<template>
  <div class="basetable-container">
    <!-- 过滤表单 -->
    <div class="fliter-from-container">
      <span v-for="item in tableSet.filterFrom" :key="item.index" class="fliter-item">
        <component
          :is="item.name"
          :defaultVal="item.defaultVal"
          :ref="item.ref"
          :label="item.label"
          :palceholder="item.palceholder"
          :params="item.params"
          @handleChange="handleChange"
        ></component>
      </span>
      <el-button
        type="primary"
        v-for="item in tableSet.headerBtn"
        :key="item.index"
        @click="handleClick('','',item.handleName)"
      >{{item.text}}</el-button>
      <el-button @click="handleClear">Clear</el-button><br>
    </div>
    <!-- 表格 -->
    <el-table
      class="fliter-table"
      :data="tableSet.tableData"
      style="width: 100%"
      :header-row-style="{color:'#56bcff',height:'80px'}"
      :header-align="'center'"
      highlight-current-row
      height="660"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="item in tableSet.clos"
        :key="item.index"
        :prop="item.prop"
        :label="item.label"
        :align="item.align || 'center'"
        :width="item.width"
        :show-overflow-tooltip="true"
        v-if="item.isShow"
      >
        <template slot-scope="scope" >
          <span v-if="item.html" v-html="item.html(scope.row)" style="cursor:pointer"></span>
          <span v-else-if="item.link" @click="item.link(scope.row)">{{scope.row[item.prop]}}</span>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="operation" :align="'center'" width="200" >
        <template slot-scope="scope">
          <el-button
            v-for="item in tableSet.btns"
            :key="item.index"
            :type="item.type"
            :size="item.size || 'small'"
            @click="handleClick(scope.row,scope.$index,item.handleName)"
          >{{item.text}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-box">
      <el-pagination class="pagination" background layout="prev, pager, next" @current-change="handleChangePage" :total="tableSet.total"></el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  props: ["tableSet"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handleClick(row, index, name) {
      this.$emit("handleClick", row, index, name);
    },
    handleChange(params, v) {
      this.$emit("handleGetSearchParams", params, v);
    },
    handleChangePage(v){
      // 这个是分页时候调借口 
      this.$emit("handleChangePage",'pageIndex', v);
    },
    handleClear() {
      if (this.$refs) {
        for (var key in this.$refs) {
          if (this.$refs[key] && this.$refs[key][0]) {
            this.$refs[key][0].clear();
            this.$emit("handleClearParams");
          }
        }
      }
    },
  }
};
</script>



<style lang="scss" scoped>
.basetable-container {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 25px 0px;
  margin-bottom: 20px;
  border-radius: 8px;
  .fliter-from-container {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 10px 0;
    padding: 20px;
    .fliter-item {
      margin: 5px 10px;
      display: inline-block;
    }
  }
  .fliter-table {
    height: 400px;
  }
  .pagination-box {
    width: 100%;
    height: 50px;
    background: #ffffff;
    position: relative;
    .pagination {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
}
</style>
